<template>
  <div class="app-container">
    <div class="item-container">
      <div class="header">
        <div class="title">「车辆报警申诉」规则</div>
        <div class="toggle">
          <el-switch v-model="ruleForm.handRuleStatus" :active-value="1" :inactive-value="0" />
        </div>
      </div>
      <div class="content">
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="140px">
          <el-form-item label="申诉截止时间:">
            发送报警邮件后 <el-input-number v-model.number="ruleForm.handEndTime" :min="1" :max="100" :step="1" placeholder="请输入数值" /> 小时
          </el-form-item>
        </el-form>
        <!-- <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="140px">
          <el-form-item label="二次下发报警时间：">
            首次发送报警后 <el-input-number v-model.number="ruleForm.handMaxNum" :min="1" :max="100" :step="1" placeholder="请输入数值" /> 次
          </el-form-item>
        </el-form> -->
      </div>
    </div>
    <div class="footer" style="text-align: center;">
      <el-button type="primary" @click="handelEdit">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { handRuleInfo, addHandRule } from '@/api/crossRegionalMonitoring'
export default {
  name: 'HandRule',
  data() {
    return {
      ruleForm: {
        handRuleStatus: 0
      }
    }
  },
  created() {
    this.queryHandRuleInfo()
  },
  methods: {
    queryHandRuleInfo() {
      handRuleInfo().then(res => {
        const { data } = res
        this.ruleForm = data || { handRuleStatus: 0 }
      })
    },
    handelEdit() {
      const params = { ...this.ruleForm }
      addHandRule(params).then((res) => {
        const { data } = res
        console.log(data)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.queryHandRuleInfo()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .item-container{
    width: 100%;
    background-color: rgba(242, 242, 242, 1);
    padding: 0 15px 10px 15px;
    border: 1px solid rgba(215, 215, 215, 1);
    margin-bottom: 20px;
    .header{
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        .title{
            font-size: 14px;
            font-weight: 650;
        }
    }
    .content{
        background: #fff;
        padding-top: 15px;
        span{
          font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
          font-weight: 650;
          font-style: normal;
          font-size: 16px;
          color: #1A1A1A;
        }
    }
  }
</style>
